<html>

<head></head>
<script src="./pdf.js"></script>
<style>

</style>

<body>
    <canvas id="the-canvas"></canvas>
</body>
<script type="text/javascript">
    // If absolute URL from the remote server is provided, configure the CORS
    // header on that server.
    var url = '//cdn.mozilla.net/pdfjs/helloworld.pdf';

    // Disable workers to avoid yet another cross-origin issue (workers need
    // the URL of the script to be loaded, and dynamically loading a cross-origin
    // script does not work).
    // PDFJS.disableWorker = true;

    // The workerSrc property shall be specified.
    PDFJS.workerSrc = './pdf.worker.js';

    // Asynchronous download of PDF
    var loadingTask = PDFJS.getDocument(url);
    loadingTask.promise.then(function(pdf) {
        console.log('PDF loaded');

        // Fetch the first page
        var pageNumber = 1;
        pdf.getPage(pageNumber).then(function(page) {
            console.log('Page loaded');

            var scale = 1.5;
            var viewport = page.getViewport(scale);
            var swp_w = window.innerWidth,
                swp_h = window.innerHeight;
            viewport.width = swp_w;
            viewport.height = swp_h;
            // Prepare canvas using PDF page dimensions
            var canvas = document.getElementById('the-canvas');
            var context = canvas.getContext('2d');
            canvas.height = viewport.height;
            canvas.width = viewport.width;

            // Render PDF page into canvas context
            var renderContext = {
                canvasContext: context,
                viewport: viewport
            };
            var renderTask = page.render(renderContext);
            renderTask.then(function() {
                console.log('Page rendered');
            });
        });
    }, function(reason) {
        // PDF loading error
        console.error(reason);
    });
</script>

</html>